<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" :title="dialogTitle" width="80%" @close="emits('closeDialog')">
        <el-descriptions :column="3" direction="vertical">
            <el-descriptions-item label="总金额">{{ recordAssets.total }} {{ recordAssets.currency }}</el-descriptions-item>
            <el-descriptions-item label="可用金额">{{ recordAssets.amount }} {{ recordAssets.currency }}</el-descriptions-item>
            <el-descriptions-item label="冻结金额">{{ recordAssets.freeze }} {{ recordAssets.currency }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="recordHistory" border v-loading="loading">
            <el-table-column prop="id" label="id" align="center" />
            <el-table-column prop="merchant_id" label="商户id" align="center" />
            <el-table-column prop="merchant_name" label="商户名称" align="center" />
            <el-table-column prop="createtime" label="交易时间" :formatter="formatterTime" align="center" ></el-table-column>
            <el-table-column prop="trade_type" label="交易类型" align="center" />
            <el-table-column prop="currency" label="币种" align="center" />
            <el-table-column prop="amount" label="交易金额" align="center">
              <template #default="scope">{{ scope.row.sg }} {{ scope.row.amount }}</template>
            </el-table-column>
            <el-table-column prop="amount_before" label="交易前金额" align="center" />
            <el-table-column prop="amount_after" label="交易后金额" align="center" />
            <el-table-column prop="freeze_before" label="冻结前金额"  align="center" />
            <el-table-column prop="freeze_after" label="冻结后金额" align="center" />
            <el-table-column prop="record_id" label="源记录ID" align="center" />
            <el-table-column prop="description" label="备注" align="center" />
        </el-table>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { formatterTime } from "@/utils/utils";
const dialogFormRef = ref(null);
const loading = ref(false);
defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    btnLoading: {
        type: Boolean,
        default: false
    },
    dialogTitle: {
        type: String,
        default: ""
    },
    btnType: {type: String, default: ""},
    recordHistory: {type: Array, default: []},
    recordAssets: {type: Object, default: {}}
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

</script>
  